/**
 * 基于Antd的上传组件
 * @author SPY
 * @description 用于图片、附件上传等等
 * @date 2020/03/09
 */

import React, { Component } from 'react';
import { Card, Row, Col } from 'antd';
import Upload from './components/SimpleUpload';

class UploadPage extends Component {

    state = {
        data: [
            {
                uid: '1',
                name: 'xxx.png',
                status: 'done',
                url: 'http://www.baidu.com',
            },
            {
                uid: '2',
                name: 'yyy.png',
                status: 'error',
                response: 'Server Error 500', // custom error message to show
                url: 'http://www.baidu.com/yyy.png',
            },
        ],
        buttonData: [
            {
                uid: '1',
                name: 'xxx.png',
                status: 'done',
                url: 'http://www.baidu.com',
            },
            {
                uid: '2',
                name: 'yyy.png',
                status: 'error',
                response: 'Server Error 500', // custom error message to show
                url: 'http://www.baidu.com/yyy.png',
            },
        ]
    }

    onFileChange = (fileList) => {
        this.setState({ data: fileList });
        console.log('fileList', fileList);
    }

    onButtonFileChange = (fileList) => {
        this.setState({ buttonData: fileList });
        console.log('buttonFileList', fileList);
    }

    render() {
        const { data, buttonData } = this.state;
        return (
            <Row gutter={24} style={{ marginTop: '1%' }}>
                <Col span={12}>
                    <Card size='small' type='inner' title='拖动上传'>
                        <Upload
                            isDrag={true}
                            maxUploadCount={3}
                            onFileChange={this.onFileChange}
                            defaultFileList={data}
                        // downloadOnly={true}
                        />
                    </Card>
                </Col>
                <Col span={12}>
                    <Card size='small' type='inner' title='按钮上传' >
                        <Upload
                            isDrag={false}
                            maxUploadCount={3}
                            onFileChange={this.onButtonFileChange}
                            defaultFileList={buttonData}
                        // downloadOnly={true}
                        />
                    </Card>
                </Col>
                <Col span={12}>
                    <Card size='small' type='inner' title='仅显示附件' style={{marginTop:'1%'}}>
                        <Upload
                            isDrag={false}
                            maxUploadCount={3}
                            onFileChange={this.onButtonFileChange}
                            defaultFileList={buttonData}
                            downloadOnly={true}
                        />
                    </Card>
                </Col>
            </Row>
        );
    }
}

export default UploadPage;